<template>
	<view style="height: 100%;">
		<navbar title="预约记录" :back="true" color="#fff" leftIconColor="#fff"></navbar>
		<view style="position: fixed;z-index: 9000;left: 0;width: 100%;background-color:#3277fc;padding:20rpx 0;" :style="{top:`${topheight}px`}">
			<view style="padding: 0 20rpx 20rpx 20rpx;">
				<u-search placeholder="输入会议关键词"  :showAction='false' v-model='page.keyword' borderColor='#3277fc' height='60' bgColor='#fff' color='#000' searchIcon='search' placeholderColor='##a5a5a5' searchIconColor='#a5a5a5'
					@search="search()">
				</u-search>
			</view>
			<u-tabs :list="tabList" @click="changTab" lineColor="#fff" :current="current" sticky :inactiveStyle="{color:'#fff'}" :activeStyle="{color:'#fff',fontWeight:'650'}"></u-tabs>
		</view>
		<view style="height: 210rpx;"></view>
		<view class="conter">
			<view style="padding: 0 20rpx 20rpx 20rpx;" v-if="list.length!=0">
				<view v-for="(item,index) in list" :key="index" style="background-color:#fff;border-radius: 20rpx;margin-top: 20rpx;padding: 20rpx;" @tap="goDetail(item.oid)">
					<view style="display: flex;justify-content: space-between;align-items:center;padding-bottom: 20rpx;border-bottom: 2rpx solid rgba(112, 112, 112,.15);">
						<view style="font-size: 30rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;width: 420rpx;font-weight: 700;">{{item.orderName}}</view>
						<view style="color:#3c7efc;font-weight: 650;font-size: 28rpx;" v-if="item.statue==1">报名中</view>
						<view style="color:#fcab32;font-weight: 650;font-size: 28rpx;" v-if="item.statue==2">活动中</view>
						<view style="color:#c3c3c3;font-weight: 650;font-size: 28rpx;" v-if="item.statue==4">已结束</view>
						<view style="color:#bfbfbf;font-weight: 650;font-size: 28rpx;" v-if="item.statue==0">已取消</view>
						<view style="color:#9390dd;font-weight: 650;font-size: 28rpx;" v-if="item.statue==3">已签到</view>
						<view style="color:#d8b175;font-weight: 650;font-size: 28rpx;" v-if="item.statue==5">未到场</view>
					</view>
					<view style="display: flex;border-bottom: 2rpx solid rgba(112, 112, 112,.15);padding: 20rpx 0;">
						<image :src="item.image"  style="width: 200rpx;display:block;border-radius: 20rpx;height: 200rpx;"></image>
						<view style="margin-left: 20rpx;color: #818181;">
							<view style="font-size:24rpx;margin: 10rpx 0;">会议类型 : {{item.type==0?'达人':item.type==1?'商家':item.type==2?'团长':item.type==3?'机构':''}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;">开始时间 : {{item.beginTime}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;">结束时间 : {{item.endTime}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;" v-if="item.signTime!=null">签到时间 : {{item.signTime}}</view>
							<!-- <view style="display: flex;align-items: center;margin-bottom: 10rpx;">
								<view style="font-size: 24rpx;margin-right: 6rpx;">参与人员 :</view>
								<view v-for="(e,d) in item.proType" :key="d" style="display: flex;align-items: center;">
									<view style="font-size: 26rpx;margin-left:8rpx;">{{e.type}}</view>
								</view>
							</view> -->
						</view>
					</view>
					<u-modal :show="canshow" title="会议取消原因" :closeOnClickOverlay="true" @cancel='canshow=false' @close='canshow=false' @confirm='canConfirm' :showCancelButton='true'>
						<view class="slot-content" style="width: 100%;">
							<u--textarea v-model="can.msg" placeholder="请输入取消原因" autoHeight></u--textarea>
						</view>
					</u-modal>
					<view style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<view style="font-size: 28rpx;" v-if="item.statue==1">距离会议开始还剩<text style="color: red;">{{item.day}}</text></view>
					    <view v-else></view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view style="background-color: #3277fc;;padding: 10rpx 20rpx;border-radius: 20rpx;font-size: 24rpx;color: #fff;" v-if="item.statue==1&&item.trafficStatue==0" @click.stop="getId(item.id)">行程信息</view>
							<view style="border: 2rpx solid #a9a9a9;padding:10rpx 20rpx;border-radius: 20rpx;font-size: 24rpx;color: #a9a9a9;margin-left: 30rpx;" v-if="item.statue==1"   @click.stop="cancellation(item.id)">取消报名</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<u-empty
				        mode="list"
				        icon="http://cdn.uviewui.com/uview/empty/list.png"
						text='暂无预约记录'
				>
				</u-empty>
			</view>
		   <!-- <view style="padding: 0 20rpx 20rpx 20rpx;">
				<view v-for="(item,index) in list" :key="index" style="background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;padding: 20rpx;" @click="goCard(`/pages/sub/store/detail?id=${item.oid}`)">
					<view style="display: flex;justify-content: space-between;align-items:center">
						<view style="color:red;font-weight: 650;font-size: 28rpx;">{{item.statue==0?'已取消':item.statue==1?'报名中':item.statue==2?'进行中':item.statue==3?'已签到':item.statue==5?'未到场':item.statue==4?'已结束':''}}</view>
					    
					</view>
					<view style="display: flex;align-items: center;margin: 20rpx 0;">
						<image :src="item.image"  style="width: 200rpx;display:block;border-radius: 20rpx;height: 200rpx;"></image>
						<view style="margin-left: 20rpx;">
							<view style="font-size: 28rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;width: 448rpx;">{{item.orderName}}</view>
							<view style="font-size:24rpx;margin: 10rpx 0;">类型 : {{item.type==0?'达人':item.type==1?'商家':item.type==2?'团长':item.type==3?'机构':''}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;">开始时间 : {{item.beginTime}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;">结束时间 : {{item.endTime}}</view>
							<view style="font-size:24rpx;margin-bottom:10rpx;" v-if="item.signTime!=null">签到时间 : {{item.signTime}}</view>
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view class="" v-if="item.trafficStatue"></view>
						<view style="border: 2rpx solid #ccc;padding: 10rpx 20rpx;border-radius: 20rpx;font-size: 24rpx;" v-if="item.statue==1&&item.trafficStatue==0" @click.stop="getId(item.id)">行程信息</view>
						<view style="border: 2rpx solid #ccc;padding: 10rpx 20rpx;border-radius: 20rpx;font-size: 24rpx;" v-if="item.statue==1" @click.stop="cancellation(item.id)">取消报名</view>
					</view>
				</view>
			</view> -->
			<u-popup :show="tarShow" mode="center"  @close="tarShow=false" :closeable='true' :closeOnClickOverlay='true' round='10' :customStyle="{width:'560rpx',height:'650rpx'}">
			        <view style="color: #000;margin-top: 24rpx;">
			            <view style="text-align: center;font-weight: 650;font-size: 32rpx;margin-bottom: 20rpx;">行程信息</view>
						<view style="padding: 0 40rpx;">
							<view style="padding: 20rpx 0;">
								<view style='display: flex;align-items: center;'>
									<view style="margin-left: 6rpx;margin-right: 16rpx;margin-bottom: 10rpx;font-size: 30rpx;">乘坐交通工具</view>
									<view style="color:rgba(166, 29, 36, 1);">*</view>
								</view>
								<view style="border: 2rpx solid #c5c5c5;padding: 10rpx 20rpx;background-color:#fff;border-radius: 10rpx;" class="input" @click="tranShow=true">
									  <u--input placeholder="请选择乘坐工具" border="none"  v-model="tarfficName" disabledColor='transparent' disabled :placeholderClass="{}" color='#000' fontSize='13px'></u--input>
								</view>
							</view>
								<u-picker :show="tranShow" :columns="tranList" :closeOnClickOverlay='true' keyName='text' @close='tranShow=false' @confirm='tranConfirm' @cancel='tranShow=false'></u-picker>
						     <view style="padding-bottom:20rpx" v-if="tarfficName!=''">
						     	<view style="display: flex;align-items: center;">
									<view style="margin-left: 6rpx;margin-right: 24rpx;margin-bottom: 10rpx;font-size: 30rpx;">出发时间</view>
									<view style="color:rgba(166, 29, 36, 1);">*</view>
								</view>
						     	<view style="border: 2rpx solid #c5c5c5;padding: 10rpx 20rpx;background-color:#fff;border-radius: 10rpx;" class="input" @click="beginShow=true">
						     		  <u--input placeholder="请选择出发时间" border="none"  v-model="tarffic.trafficBeginTime" disabledColor='transparent' disabled :placeholderClass="{}" color='#000' fontSize='13px'></u--input>
						     	</view>
						     </view>
							 <u-datetime-picker  :show="beginShow" v-model="beginTime" mode="datetime" @confirm='begfirm' :closeOnClickOverlay='true' @close='beginShow=false' @cancel='beginShow=false'></u-datetime-picker>
							 <u-datetime-picker  :show="endShow" v-model="endTime" mode="datetime" @confirm='endfirm' :closeOnClickOverlay='true' @close='endShow=false' @cancel='endShow=false'></u-datetime-picker>
							 <view style="padding-bottom:20rpx" v-if="tarfficName!=''">
							 	<view style="display: flex;align-items: center;">
									<view style="margin-left: 6rpx;margin-right: 24rpx;margin-bottom: 10rpx;font-size: 30rpx;">到达时间</view>
									<view style="color:rgba(166, 29, 36, 1);">*</view>
								</view>
							 	<view style="border: 2rpx solid #c5c5c5;padding: 10rpx 20rpx;background-color:#fff;border-radius: 10rpx;" class="input" @click="endShow=true">
							 		  <u--input placeholder="请选择到达时间" border="none"  v-model="tarffic.trafficEndTime" disabledColor='transparent' disabled :placeholderClass="{}" color='#000' fontSize='13px'></u--input>
							 	</view>
							 </view>
							<view style="width:300rpx;margin: 0 auto;margin-top: 20rpx;position: absolute;bottom: 20rpx;left: 26%;">
								<u-button type="info" text="确认" @click='Tarconfirm' color='#3277fc'></u-button>
							</view>
						</view>
			        </view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/baseNavbar.vue"
	import {
		getuserList,
		getuserCancel,
		getuserTarffic
	} from "@/api/make.js"
	import {
		goNav
	} from '@/lib/Comment.js'
	export default{
		components:{
			navbar
		},
		data(){
			return{
				current:0,
				topheight:'',
				beginTime:new Date().getTime(),
				endTime:new Date().getTime(),
				beginShow:false,
				endShow:false,
				canshow:false,
				page: {
					page: 1,
					limit: 10,
					keyword:'',
					statue:[]
				},
				can:{
					id:'',
					msg:''
				},
				tarffic:{
					trafficType:'',
					trafficBeginTime:'',
					trafficEndTime:'',
					id:''
				},
				tarfficName:'',
				tranList:[
					[
						{
							text:'飞机',
							id:1
						},{
							text:'高铁',
							id:2
						},{
							text:'自驾',
							id:3
						},{
							text:'其他',
							id:4
						}
					]
				],
				tranShow:false,
				tarShow:false,
				loadend: false,
				loading: false,
				list:[],
				tabList:[
					{
						name:'全部',
						statue:[]
					},{
						name:'已报名',
						statue:[1]
						
					},{
						name:'活动中',
						statue:[2,3]
					},{
						name:"己结束",
						statue:[4]
					},{
						name:'已取消',
						statue:[0,5]
					}
				],
			}
		},
		onLoad(option){
			if(option.current){
				this.current = option.current
				this.page.statue = this.tabList[this.current].statue.join(',')
				console.log(this.page.statue);
				this.resetList()
			}
			this.topheight = uni.getMenuButtonBoundingClientRect().bottom+4
			console.log('11',this.topheight);
		},
		methods:{
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/sub/store/detail?id=' + id
				})
			},
			search(e){
				this.page.keyword = e
				this.resetList()
			},
			begfirm(e){
				this.tarffic.trafficBeginTime = this.timestampToTime(e.value)
				this.beginTime = this.tarffic.trafficBeginTime
				this.beginShow = false
			},
			endfirm(e){
				this.tarffic.trafficEndTime = this.timestampToTime(e.value)
				this.endTime = this.tarffic.trafficEndTime
				this.endShow = false
			},
			getId(id){
				this.tarffic.id = id
				if(this.tarffic.id!=''){
					this.tarShow = true
				}
			},
			timestampToTime(timestamp) {
			    timestamp = timestamp ? timestamp : null;
			    let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			    let Y = date.getFullYear() + '-';
			    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let H = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours())+':';
			    let S = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			    return Y + M + D + H + S;
			},
			tranConfirm(e){
				this.tarfficName = e.value[0].text
				this.tarffic.trafficType=e.value[0].id
				this.tranShow = false
				console.log('par',this.tarffic);
			},
			Tarconfirm(){
				getuserTarffic(this.tarffic).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title:'提交成功'
						})
						this.tarShow=false
						this.resetList()
					}
				})
			},
			canConfirm(){
				getuserCancel(this.can).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title:'取消成功'
						})
						this.can.msg=''
						this.resetList()
					}
				})
			},
			cancellation(id){
				this.canshow = true
				this.can.id = id
			},
			goCard(url, appid) {
				if (appid) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: url,
						envVersion: 'release'
					})
				} else {
					goNav(url)
				}
			
			},
			changTab(e){
				this.page.statue = e.statue.join(',')
				console.log(this.page.statue);
				this.resetList()
			},
			resetList(callback){
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
			},
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				getuserList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					this.page.keyword =''
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color:#f6f6f6;
	}
</style>
<style lang="scss" scoped>

</style>